<template>
	<div>
		<el-card>
			<div slot="header">
				<div class="aboutus">
					<div class="title">
						<el-divider content-position="center"><span style="font-size: 20px;">个人中心</span></el-divider>
					</div>
					<div class="content">

						<div class="psoninfo">
							<div class="userPsonleft">
								<p>基本信息</p>
								<div class="infos">
									<el-avatar :size="88" :src="circleUrl"></el-avatar>
									<div class="intruduce">
										<span>系统管理员</span>
									</div>
								</div>
								<div class="infosGroup" v-for="(v,i) in usersInfos" :key="i">
									<div class="a" style="display: flex;justify-content: space-between;align-items: center;width: 100%;margin: 12px;">
										<i :class="v.icon"></i>
										<span style="flex: 1;font-size: 12px;margin-left: 12px;font-weight: bold;">{{ v.title + ":" }}</span>  
										<span style="flex: 3;font-size: 12px;">{{ v.name }}</span>
									</div>
								</div>
							</div>
							<div class="userPsonRight">
								<p>安全设置</p>
								<div class="infosGroup" v-for="(v,i) in usersInfosUpdate" :key="i">
									<div class="a" style="display: flex;justify-content: space-between;align-items: center;width: 100%;margin: 28px 12px;">
										<i :class="v.icon" style="font-size: 28px;"></i>
										<div class="ooos" style="flex: 6;display: flex;flex-direction: column;">
											<span style="flex: 1;font-size: 14px;margin-left: 12px;font-weight: bold;">{{ v.title }}
												<i :class="v.iconRs" style="color: #1AAD19;"><span style="font-size: 12px;color: #1AAD19;">{{ v.btns == '修改' ? '已绑定' : '未绑定' }}</span></i>
											</span>
											<span style="font-size: 12px;margin-left: 12px;">
												{{ v.name }}
												<span style="font-size: 12px;margin-left: 12px;color: #b3b3b3;">{{ v.spoken }}</span>
											</span>
										</div>
										<el-button type="danger" size="mini" @click="handleClick(v,i)" style="margin-right: 28px;" plain>{{ v.btns }}</el-button>
									</div>
								</div>
								<p>第三方账号</p>
								<div class="infosGroup" v-for="(v,i) in accounts" :key="v.id">
									<div class="a" style="display: flex;justify-content: space-between;align-items: center;width: 100%;margin: 12px;">
										<i :class="v.icon" style="font-size: 28px;"></i>
										<span style="flex: 1;font-size: 12px;margin-left: 12px;font-weight: bold;">{{ v.title + ":" }}</span>
										<span style="flex: 6;font-size: 12px;"><i class="el-icon-warning" type="warning"></i>{{ v.value }}</span>
										<el-button type="primary" size="mini" style="margin-right: 28px;">{{ v.btns }}</el-button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 重置密码dialog -->
					<div class="resetPwd">
						<el-dialog
						  title="重置密码"
						  :visible.sync="resetPwddialogVisible"
						  width="20%"
						  :before-close="handleClose">
							<div v-if="this.Self === true" style="padding: 12px;text-align: center;">
								<span>当前用户：<i class="el-icon-aim"></i>{{ userName + '（我）' }}</span>
							</div>
							<div v-else style="padding: 12px;text-align: center;">
								<span>当前用户：{{ userName }}</span>
							</div>
						  <el-form ref="resetPwdForm" :model="resetPwdForm" :rules="rules" label-width="88px" size="mini" style="display: flex;flex-wrap: wrap;">
								<el-form-item label="原始密码" prop="userId">
									<el-input show-password v-model="resetPwdForm.oldPassword"></el-input>
								</el-form-item>
								<el-form-item label="新密码" prop="userId">
									<el-input show-password v-model="resetPwdForm.newPassword"></el-input>
								</el-form-item>
							</el-form>
						  <span slot="footer" class="dialog-footer">
						    <el-button size="mini" @click="resetPwddialogVisible = false">取 消</el-button>
						    <el-button size="mini" type="primary" @click="resetPwdSubmit">确 定</el-button>
						  </span>
						</el-dialog>
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>
<script>
	// 接口
	import { editPwd } from "@/api/user.js";
	export default {
		data() {
			return {
				userId:'',
				userName:'',
				circleUrl: "https://img2.baidu.com/it/u=1615503299,3525541790&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
				action: "http://127.0.0.1:5000/users/avatar_upload",
				// usersInfo: JSON.parse(localStorage.getItem( "usersInfo" )),
				usersInfos:[],
				usersInfosUpdate:[
					{id:1,name:'188****8888',title:'安全手机',icon:'el-icon-phone',btns:'修改',iconRs:'el-icon-success',spoken:'可用于登录、身份验证、密码修改、通知接收'},
					{id:2,name:'C******@126.com',title:'安全邮箱',icon:'el-icon-message',btns:'修改',iconRs:'el-icon-success',spoken:'可用于登录、身份验证、密码修改、通知接收'},
					{id:3,name:'**********',title:'登陆密码',icon:'el-icon-key',btns:'修改',iconRs:'el-icon-success',spoken:'为了您的账号安全，建议定期修改密码'},
				],
				Self:false,
				resetPwddialogVisible:false,
				accounts:[
					{id:'001',title:'微信',value:'未绑定',icon:'el-icon-weixin',btns:"绑定"},
					{id:'002',title:'微博',value:'未绑定',icon:'el-icon-weibo',btns:"绑定"},
					{id:'003',title:'GitHub',value:'未绑定',icon:'el-icon-github',btns:"绑定"},
				],
				resetPwdForm:{
					userId:0,
					oldPassword:'', 
					newPassword: '',
				},
				//验证规则 pattern: /^[a-zA-Z]+$/,
				rules:{
				    username: [
				      { required: true, message: "请输入账户名", trigger: "blur" },
				      { min: 2, max: 8, message: "长度在2到8个字符", trigger: "blur" },
					  { min:2, max: 8,   message: '长度在2到8个字符', trigger: 'blur' }
				    ],
				      //密码
				    password:[
						{ required: true, message: "请输入密码", trigger: "blur" },
						{ min: 6, max: 12, message: "当前密码安全性低！", trigger: "blur" },
				    ],
				      //邮箱
				    // email:[
				    //    { required: true, pattern:/^\w{3,12}@\w{1,5}\.[a-z]{2,3}$/,required: true, message: "邮箱格式不正确！", trigger: "blur" },
				    // ]
				}
			};
		},
		mounted() {
			    // 从localStorage获取数据并赋值
			    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
				const myself = this.userName = userInfo.username;
				this.resetPwdForm.userId = userInfo.userId;
				this.userName == myself ? this.Self = true : this.Self = false;
				console.log(userInfo);
			    if (userInfo) {
			      this.usersInfos = [
			        { id: 1, name: userInfo.username || '未设置', title: '用户名', icon: 'el-icon-user' },
			        { id: 2, name: userInfo.mobile || '未设置', title: '手机号', icon: 'el-icon-phone' },
			        { id: 3, name: userInfo.email || '未设置', title: '邮箱', icon: 'el-icon-message' },
			        { id: 4, name: userInfo.deptName || '未设置', title: '部门', icon: 'el-icon-aim' },
			        { id: 5, name: userInfo.company || '未设置', title: '公司', icon: 'el-icon-office-building' },
			        { id: 6, name: userInfo.roleName || '未设置', title: '角色', icon: 'el-icon-s-custom' }
			      ];
			    } else {
			      // 默认数据，防止空值
			      this.usersInfos = [
			        { id: 1, name: '未登录', title: '用户名', icon: 'el-icon-user' },
			        { id: 2, name: '未设置', title: '手机号', icon: 'el-icon-phone' },
			        { id: 3, name: '未设置', title: '邮箱', icon: 'el-icon-message' },
			        { id: 4, name: '未设置', title: '部门', icon: 'el-icon-aim' },
			        { id: 5, name: '未设置', title: '公司', icon: 'el-icon-office-building' },
			        { id: 6, name: '未设置', title: '角色', icon: 'el-icon-s-custom' }
			      ];
			    }
		},
		methods: {
			handleClick(v,i){
				console.log(v);
				if(v.title == '密码' || v.title.includes('密码')){
					this.resetPwddialogVisible = true;
				}
			},
			// 提交重置密码
			async resetPwdSubmit(){
				console.log(this.resetPwdForm,'reeeeeeeee');
				let res = await editPwd(this.resetPwdForm);
				if (res.code === 200) {
					// 条件判断
					if(this.Self === true){
						//清除本地存储，回退重新登录
						this.$message({ type:"success",message:'当前账户的密码已修改，请重新登录！' })
						localStorage.clear();
						this.$router.push('/login');
					}else{
						this.$message({ type: 'success', message: '密码已重置！'});
						//更新数据源
						this.loadData();
						this.resetPwddialogVisible = false;
					}
				} else {
					this.$message.error(res.message)
				}
			},
			handleClose(done) {
				this.formdisabled = true;
				done();
			},
		},
	}
</script>

<style lang="less" scoped>
	.psoninfo {
		display: flex;
		justify-content: start;
		.userPsonleft {
			flex: 1;
			padding: 12px;
			box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
			p{
				font-size: 14px;
				font-weight: bold;
				border-bottom: 1px solid #e6e6e6;
				height: 40px;
				line-height: 40px;
				margin-top: 8px;
			}
			.infos{
				height: 288px;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.intruduce{
					margin-top: 12px;
					display: flex;
					flex-direction: column;
					span {
						text-align: center;
						font-size: 18px;
					}
				}
				.infosGroup{
					.a{
						span {
							text-align: center;
							font-size: 12px;
						}
					}
					
				}
			}
		}

		.userPsonRight {
			flex: 3;
			margin-left: 12px;
			box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
			padding: 12px;
			p{
				font-size: 14px;
				font-weight: bold;
				border-bottom: 1px solid #e6e6e6;
				height: 40px;
				line-height: 40px;
				margin-top: 8px;
			}
		}
	}

	.el-upload {
		img {
			width: 120px;
			height: 120px;
		}
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
		border-radius: 15px;
	}

	.aboutus .grid-content.line {
		border-right: 1px solid #ddd;
		height: 150px;
	}

	.aboutus .el-card__header {
		background: #545c64;
	}

	.aboutus .el-card__body {
		padding: 50px 20px;
	}

	.aboutus .el-timeline-item__wrapper {
		top: -8px;
	}

	.aboutus .title p .el-tag {
		margin: 0px 5px;
		cursor: pointer;
	}

	.aboutus {
		
	}

	.intro {
		width: 200px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.text {
		font-size: 14px;
		text-align: left;
		line-height: 30px;
		text-indent: 2em;
	}

	.box-card {
		position: relative;
	}

	.item {
		display: inline-block;
		margin: 30px 50px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.clearfix span {
		color: #fff;
		font-weight: bold;
	}

	.title p {
		color: #8c8888;
		font-size: 14px;
		text-align: center;
	}

	.grid-content .large {
		font-size: 16px;
		color: #409EFF;
		font-weight: bold;
	}

	.topMask {
		width: 100px;
		height: 100px;
		background-color: rgba(68, 138, 255, 0.2);
		transform: rotate(45deg);
		position: absolute;
	}

	.square {
		border-radius: 5px;
		top: 0px;
	}

	.circular {
		border-radius: 50%;
		top: 80px;
		left: 80%;
		background-color: rgba(255, 208, 75, 0.2);
	}
</style>